<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我</button>
    <div>赵玉真</div>
    <script>
        //   事件三要素：事件源  事件类型 事件处理程序
        // 1事件源 事件被触发的对象
        var btn = document.getElementById('btn');
        // 2事件类型 如何触发 什么事 比如鼠标点击事件
        // 3事件处理程序 通过函数赋值的方法 完成
        btn.onclick = ()=>{
            alert('胡歌')
        }


        // 执行步骤
        // 1，获取事件源
        var div = document.querySelector('div')
        //  2,绑定事件 注册事件
        // 3，添加事件处理程序
        div.onclick = function () {
            console.log('我回来了....');
        }

        // 常见鼠标事件
        // onclick        鼠标点击触发
   
        // onfocus        获得鼠标焦点触发
        // onblur         失去鼠标焦点触发 
        // onmousemove    鼠标移动触发
        // onmouseup      鼠标弹起触发
        // onmousedown    鼠标按下触发

         // onmouseover    鼠标经过触发 冒泡有
        // onmouseout     鼠标离开触发
        // mouseenter   鼠标经过触发推荐
        // mouseleave   鼠标离开触发推荐
        // change事件    改变了就触发用于文本框等
    </script>
</body>

</html>